<template>
	<gracePage headerBG="#F2F2F2" :bounding="false">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color-f2">
				<text class="grace-h4 text-center font-size-36 ml-4" style="font-size:40rpx;"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"  style="font-size:40rpx;">购物车</view>
				<!-- 消息按钮 -->
				<text class="grace-h4 p-1 " ></text>
			</view>
		</view>
		<!-- 使用自定义底部导航时为主体增加底部 padding 避免遮盖 -->
		<view slot="gBody" class="grace-body " style="padding-bottom:150rpx;">
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<!-- 局部 Loading -->
			<w-loading text="" mask="false" click="true" ref="loading"></w-loading>
			<!-- 购物车为空 -->
			<view v-if="!loginStatus || disableSelectAll" >
				<graceEmpty>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray pt-3">您的购物车空空如也~</text>
				</graceEmpty>
			</view>
			<!-- 购物车主结构  -->
			<view class="grace-shoppingcard grace-tbr-large grace-bg-white py-2" v-else :class="{ lodingAnimation: !graceFullLoading }">
				<view class="grace-space-between grace-flex-vcenter px-2 ">
					<view class="grace-shopp-name">
						<graceCheckBtn :checked="checkedAll" @change="doSelectAll" color="#A6A6A6" checkedColor="#1CA376">
							<text class="grace-h5 grace-bold">臻之筱</text>
						</graceCheckBtn>
					</view>
					<view class="grace-shopp-go grace-nowrap grace-flex-end" @tap="editFn">{{ editsStatus ? '管理' : '完成' }}</view>
				</view>
				<view style="height:25rpx;"></view>
				<view class="grace-shoppingcard-goods px-2 mb-4" v-for="(goods, indexItem) in cartList" :key="indexItem">
					<view class="grace-shoppingcard-goods-checkbtn grace-flex grace-flex-vcenter">
						<graceCheckBtn :checked="goods.checked" @change="selectItem(indexItem)" color="#A6A6A6" checkedColor="#1CA376" :parameter="[indexItem]"></graceCheckBtn>
					</view>
					<image :src="goods.goods_img" class="grace-shoppingcard-goods-image" style="width: 154rpx;height: 154rpx;" mode="widthFix" lazy-load></image>
					<view class="grace-shoppingcard-goods-body">
						<view class="grace-shoppingcard-goods-title grace-ellipsis">{{ goods.goods_name }}</view>
						<view class="grace-shoppingcard-goods-title grace-ellipsis grace-black9 grace-text">{{ goods.goods_attr }}</view>
						<view class="grace-space-between">
							<view class="grace-wrap grace-flex-vbottom">
								<text class="grace-shoppingcard-goods-price" style="font-size: 24rpx;padding-bottom: 6rpx;">￥</text>
								<text class="grace-shoppingcard-goods-price">{{ goods.vip_price }}</text>
							</view>
							<view class="grace-shoppingcard-goods-number">
								<graceNumberBox
									:disabled="true"
									:index="indexItem"
									:datas="indexItem + ''"
									inputPadding="5rpx"
									:value="parseInt(goods.goods_number)"
									:maxNum="parseInt(goods.num)"
									:minNum="1"
									@change="numberChange"
								></graceNumberBox>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<w-loading text="" mask="false" click="true" ref="loading"></w-loading>
		</view>
		<view slot="gFooter" v-if="loginStatus" class="grace-nowrap grace-flex-vcenter grace-border-t grace-bg-white grace-border-b" style="height: 100rpx;">
			<view class="grace-shoppingcard-checkbtn grace-nowrap grace-flex-vcenter">
				<graceCheckBtn :checked="checkedAll" @change="doSelectAll"  color="#A6A6A6" checkedColor="#1CA376" v-if="!disableSelectAll">
					<text class="grace-text">{{ selectText }}</text>
				</graceCheckBtn>
			</view>
			<view class="grace-shoppingcard-count  mr-3" v-show="editsStatus">
				<view class="grace-nowrap grace-flex-vcenter grace-flex-end" style="text-align: center;">
					<text class="grace-text">合计 :</text>
					<text style="font-size:32rpx; color:#F00;">￥{{ totalPrice | addExpress}}</text>
				</view>
				<view class="grace-nowrap grace-flex-vcenter grace-flex-end">
					<text class="grace-text-small pr-1 grace-black9">金额:￥{{totalPrice}}</text>
					<text class="grace-text-small grace-black9">邮费:￥{{ (totalPrice > 0) && (totalPrice <= 99) ? 10 : 0}}</text>
				</view>
			</view>
			<view class="grace-shoppingcard-checkout grace-bg-red grace-tbr-large mr-2" @tap="checkout" v-show="editsStatus">结算</view>
			<!-- <text class="grace-capsule-text grace-tbr-large grace-yellow mr-2" v-show="!editsStatus" style="border:1px solid #FFCC00;">移入收藏夹</text> -->
			<text class="grace-capsule-text grace-tbr-large grace-red ml-auto mr-4" @tap="doDelGoods" v-show="!editsStatus" style="border:1px solid #FF0036;width: 80rpx;">删除</text>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
import graceFullLoading from '@/graceUI/components/graceFullLoading.vue';

import tools from '@/common/js/tools.js';
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex';
export default {
	data() {
		return {
			// 全屏加载
			graceFullLoading: false,
			// 选择文本
			selectText: '全选',
			// 控制编辑
			editsStatus: true
		};
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			cartList: state => state.cart.list,
			selectedList:state=>state.cart.selectedList,
			lodingStatus:state=>state.cart.lodingStatus,
			
		}),
		...mapGetters(['totalPrice', 'checkedAll', 'disableSelectAll'])
	},
	beforeDestroy() {
		uni.$off('updateCart')
	},
	onLoad(){
		console.log('加载了')
	},
	created() {
		// 初始化数据
		this.__init();
	},
	watch: {
		loginStatus: function(newVal, oldVal) {
			if (newVal) {
				this.__init();
			} else {
				// this.shoppingCard = [];
			}
		},
		lodingStatus: function(newVal, oldVal) {
			if (newVal) {
				//打开加载动画
				this.$refs.loading.open()
			} else {
				//关闭加载动画
				this.$refs.loading.close()
			}
		},
	},
	/**
	* 一. 购物车改造 使用vuex 做存储状态管理
	*   1.初始化时将购物车的商品存储到vuex cart.js里的list中
	*   2.选中商品 修改vuex list里面的状态
	*   3.添加全选功能，并计算金额总价
	*   4.监听商品数量的增加与减少
	* 
	* 
	* 
	* */
	methods: {
		...mapActions(['doSelectAll', 'doDelGoods' ,'updateCartList']),
		...mapMutations(['selectItem', 'initCartList', 'numberChange' ,'unSelectAll']),
		async __init() {
			
			if (this.loginStatus) {
				this.graceFullLoading = true;
				this.updateCartList().then(res=>{
					if (res.error) {
						uni.hideToast();
					}
					uni.stopPullDownRefresh()
					this.graceFullLoading = false;
				}).catch(err=>{
					uni.stopPullDownRefresh()
					this.graceFullLoading = false;
				})
			}
		},
		async checkout() {
			// 商品列表为空时 不跳转
			if(this.selectedList.length === 0) return ;
			// 整合提交的商品
			this.navigateTo({
				url: '/pages/order/orderInfo/orderInfo'
			});
		},
		editFn() {
			/**
			 *  管理  true
			 *     切换执行收藏  /  删除
			 *
			 *  完成  false
			 *     隐藏执行收藏  /  删除
			 *
			 * */
			this.editsStatus = !this.editsStatus;
			var status = this.editsStatus;
			if (status) {
			}
		},
	},
	// 下拉刷新
	async onPullDownRefresh() {
		await this.__init();
		uni.stopPullDownRefresh();
	},
	filters:{
		addExpress(value){
			return (value > 0) && (value <= 99) ? tools.accAdd(value,10) : value
		}
	},
	components: {
		gracePage,
		graceNumberBox,
		graceEmpty,
		graceCheckBtn,
		graceFullLoading
	}
};
</script>
<style>
@import '../../graceUI/animate.css';
page {
	background: #f2f2f2;
}
.my-shop-bgList {
	background: #f8f8f8;
}

.grace-shoppingcard {
	background: #ffffff;
	margin-bottom: 20rpx;
}
.grace-shopp-name {
	width: 500rpx;
}
.grace-shopp-go {
	width: 120rpx;
}
.grace-shoppingcard-goods {
	display: flex;
	flex-wrap: nowrap;
}
.grace-shoppingcard-goods-checkbtn {
	width: 60rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-image {
	width: 120rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 30rpx;
	width: 430rpx;
	height: 40rpx;
}
.grace-shoppingcard-goods-price {
	color: #f00;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.grace-shoppingcard-goods-number {
	padding: 2px 0;
}
.grace-shoppingcard-remove {
	display: block;
	text-align: right;
	line-height: 50rpx;
	margin-top: 30rpx;
	color: #cccccc;
	font-size: 24rpx;
}
.grace-shoppingcard-checkbtn {
	width: 150rpx;
	margin-left: 50rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-count {
	width: 400rpx;
}
.grace-shoppingcard-checkout {
	width: 100rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	text-align: center;
	flex-shrink: 0;
}

/* 自定义动画效果、时间、循环 */
.lodingAnimation {
	animation: fadeIn 1s linear;
}
</style>
